<template>
    <div class="home">
        <header>
            <div class="swiper-box">
                <Swiper class="swiper" indicator-color="#F44336" v-model="curImg" :list="images" />
            </div>
            <div class="news">
                <Notice :list="list" left-icon="volume-o" />
            </div>
        </header>
        <div class="banner">
            <div class="banner-box">
                <div class="banner-item">
                    <div class="img">
                        <img src="../../../assets/banner/kaihu.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Home.user') }}</span>
                    </div>
                </div>
                <div class="banner-item"  @click="routerGo('/loan')">
                    <div class="img">
                        <img src="../../../assets/banner/withdrow.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Home.money') }}</span>
                    </div>
                </div>
                <div class="banner-item" @click="routerGo('/market')">
                    <div class="img">
                        <img src="../../../assets/banner/market.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Home.market') }}</span>
                    </div>
                </div>
                <div class="banner-item" @click="routerGo('/financial')">
                    <div class="img">
                        <img src="../../../assets/banner/exchange.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Home.exchange') }}</span>
                    </div>
                </div>
            </div>
        </div>
        <main>
            <div class="title">
                <span>{{ t('home.Home.news') }}</span>
            </div>
            <div class="last">
                <ul>
                    <li v-for="item in newsLastList" :key="item.id">
                        <div class="tag">
                            <span>
                                {{ t('home.Home.last') }}
                            </span>
                        </div>
                        <div class="p">{{ item.title }}</div>
                    </li>
                </ul>
            </div>
            <div class="title">
                <span>{{ t('home.Home.balance') }}</span>
            </div>
            <News :list="newsList" :indicate="t('home.Home.views')" />
        </main>
    </div>
</template>

<script setup>
import Swiper from "@/components/Swiper/index.vue";
import Notice from "@/components/Notice/index.vue";
import News from "@/components/News/index.vue";
import useLanguage from '@/hooks/useLanguage';
import { ref, onMounted, reactive } from 'vue';
import { publicApi } from '@/api'
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user';
// 路由
import { useRouter, useRoute } from 'vue-router'
import { showNotify } from 'vant';

const { t } = useLanguage()


const router = useRouter()
const route = useRoute()

const userStore = UserStore()
const { user } = storeToRefs(userStore)

function routerGo(path) {
    if (path == '/loan') {
        showNotify({ type: 'danger', message: t('Error') })
        return
    }
    router.push(path)
}


const curImg = ref(0)
const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
]);

// Top
const list = ref([])
async function getNewsListTop() {
    const postData = {
        pageNum: 1,
        pageSize: 4
    }
    const { code, data, msg } = await publicApi.publicNews(postData)
    if (code == 20000) {
        const { records } = data
        list.value = records.map((item, index) => {
            const { title } = item
            return title
        })
    }
}
// 新闻速递
const newsLastList = ref([])
async function getNewsListMiddle() {
    const postData = {
        pageNum: 2,
        pageSize: 4
    }
    const { code, data, msg } = await publicApi.publicNews(postData)
    if (code == 20000) {
        ;
        const { records } = data
        newsLastList.value = records
    }
}
// 财富有料
const newsList = ref([])
async function getNewsListBottom() {
    const postData = {
        pageNum: 3,
        pageSize: 10
    }
    const { code, data, msg } = await publicApi.publicNews(postData)
    if (code == 20000) {
        const { records } = data
        newsList.value = records
    }
}
const promises = [getNewsListTop(), getNewsListMiddle(), getNewsListBottom()]

onMounted(async () => {
    for await (const res of promises) {

    }

})

</script>

<style lang="less" scoped>
:root {
    --van-swipe-indicator-size: 10px
}

.home {
    overflow-x: hidden;
    header {
        .swiper {
            margin: 5px;
            box-sizing: border-box;
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
    }

    .banner {
        .banner-box {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            margin: 0px -10px;

            .banner-item {
                .img {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 40px;
                        height: 40px;
                    }
                }

                .name {
                    white-space: nowrap;
                    word-break: keep-all;
                    display: flex;
                    justify-content: center;
                    font-size: 14px;
                }
            }
        }
    }

    main {
        padding: 15px 10px;

        .title {
            font-size: 18px;
            color: #333;
            display: flex;
            align-items: center;
        }

        .last {
            ul {
                margin-top: 10px;

                li {
                    margin: 10px 0px;
                    height: 30px;
                    display: flex;

                    .tag {
                        word-break: keep-all !important;
                        display: flex;
                        align-items: center;
                        background-color: #FFB300;
                        margin-right: 10px;
                        padding: 5px;
                        white-space: nowrap;
                        font-size: 14px;
                    }

                    .p {
                        line-height: 30px;
                        font-size: 14px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
}
</style>